<template>
	<mescroll-uni ref="mescrollRef" @init="mescrollInit" :up="upOption" :down="downOption" @up="upCallback" @down="downCallback">
		<view class="notice-item">
			<view class="notice-info">
				<view class="notice-title">
					{{details.title}}
				</view>
				<view class="notice-time">
					{{details.add_time}} 
				</view>
				<view class="notice-intro">
					<jyf-parser :html="details.content" :selectable="true"></jyf-parser>
				</view>
			</view>
		</view>
	</mescroll-uni>
</template>

<script>
	//公告列表页面
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				details: {
					id: 1,
					add_time: "2020-10-15",
					title: "测试1",
					content: "<p>测试11</p>"
				},
				downOption: {
					auto:true,
					autoShowLoading: true
				},
				upOption: {
					use: false
				},
				id:'',
			}
		},
		onLoad(option) {
			console.log(option);
			this.id = option.id
		},
		methods: {
			downCallback(e) {
				this.$HttRequest({
					url: '/notice/details',
					param: {id: this.id}
				}).then((res) => {
					console.log(res)
					if (res.status === 10000) {
						this.details = res.data
						this.mescroll.endSuccess()
					} else {
						this.$ShowMsg(res.message);
					}
				}).catch((error) => {
					//异常错误
					this.mescroll.endErr();
					console.log(error)
				})
			},

			upCallback(e) {
				console.log(e)
			},

			getinitdata(id) {
				return new Promise((resolve, reject) => {

				})
			}

		}

	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5
	}

	.notice-item {
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 20rpx;
		width: 90%;
		margin: 20rpx auto;
		background-color: #fff;
		box-shadow: 0 10rpx 10rpx #e6e6e6;
		padding: 30rpx 0;

		image {
			width: 150rpx;
			height: 150rpx;
			border-radius: 20rpx;
			margin: 35rpx;
		}

		.notice-info {
			width: 88%;
			display: flex;
			justify-content: center;
			align-items: flex-start;
			color: #333;
			font-size: 30rpx;
			flex-direction: column;

			.notice-intro {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				color: #999;
				margin: 10rpx 0;
				margin-top: 20rpx;
			}

			.notice-time {
				width: 100%;
				padding: 20rpx 0;
				font-size: 25rpx;
				color: #c8c8c8;
				border-bottom: 1rpx solid #e6e6e6;
				display: flex;
				justify-content: flex-start;
				align-items: center;
			}
		}
	}
</style>
